<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1,width=600">
    <meta name="description" content="">
    <meta name="author" content="Jeff Wintersinger">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Kablammo</title>

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <!--<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">-->
    <link rel="stylesheet" href="css/ext/colpick.css">
    <link rel="stylesheet" href="css/ext/bootstrap-tour.min.css">

    <link rel="stylesheet" href="css/kablammo.css">
    <!-- svg-css class indicates that this stylesheet should have its rules included in exported SVGs. -->
    <link rel="stylesheet" href="css/svg.css" class="svg-css">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="//oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<div class="tab-pane">
    <p>Show up to <input id="max-query-seqs" class="form-control" type="number" min="1" value="10" /> query sequences</p>
    <p>Show up to <input id="max-subjects-per-query-seq" class="form-control" type="number" min="1" value="5" /> subjects per query</p>
    <p>Show only queries with <input id="query-filter" class="form-control" type="text" placeholder="..." /> in their names</p>
    <p>Show only subjects with <input id="subject-filter" class="form-control" type="text" placeholder="..." /> in their names</p>
    <p>
    <div class="form-group">
        Show only alignments whose E value is at most
        <div class="input-group">
            <span class="input-group-addon">1e</span>
            <input id="evalue-threshold" class="form-control" type="number" step="any" value="10" />
        </div>
    </div>
    </p>
    <p>Show only alignments whose bit score is at least <input id="bitscore-threshold" class="form-control" type="number" step="any" min="0" value="0" /></p>
    <p>
    <div class="form-group">
        Show only alignments covering at least
        <div class="input-group">
            <input id="hsp-coverage-threshold" class="form-control" type="number" step="any" value="0" min="0" max="100" />
            <span class="input-group-addon">%</span>
        </div>
        of their queries
    </div>
    </p>
    <div class="input-group-btn">
        <a id="graph-colour-example" class="btn btn-default" role="button">&nbsp;&nbsp;&nbsp;</a>
        <a id="choose-graph-colour" class="btn btn-default" role="button">Choose graph colour</a>
    </div>
</div>

<div>
    测试视图显示：
</div>



<div class="row subject" id="example-subject-result">
    <div class="subject-plot col-md-6">
        <!-- SVG inserted here via prepend(). -->
    </div>

    <div class="subject-info col-md-3">
        <p class="selected-count"></p>

        <ul class="subject-params">
            <li><span>Subject ID:</span> Pants</li>
            <li><span>Bit score:</span> Pants</li>
            <li><span>E value:</span> Pants</li>
            <li><span>Query coords:</span> Pants and socks</li>
            <li><span>Subject coords:</span> Pants</li>
            <li><span>Alignment length:</span> Pants</li>
        </ul>
    </div>

    <div class="btn-group-vertical subject-buttons col-md-3">
        <div class="btn-group">
            <button type="button" class="export-image btn btn-default dropdown-toggle" data-toggle="dropdown">
                Export image
                <span class="caret"></span>
            </button>
            <ul class="dropdown-menu" role="menu">
                <li><a href="#" class="export-to-svg">Export to SVG</a></li>
                <li><a href="#" class="export-to-png">Export to PNG</a></li>
            </ul>
        </div>
        <div class="btn-group">
            <div class="hsp-selection-controls">
                <button type="button" class="btn btn-default view-alignment">View alignments</button>
                <button type="button" class="btn btn-default export-alignment">Export alignments</button>
                <button type="button" class="btn btn-default deselect-all-hsps">Deselect all alignments</button>
                <div class="checkbox">
                    <label>
                        <input class="toggle-hsp-outline" type="checkbox" value="" checked="checked">
                        Outline selected alignments
                    </label>
                </div>
            </div>
        </div>
    </div>

    <!--弹出框 - 花色基因序列 AGTAAAA...-->
    <div class="alignment" id="example-alignment">
        <h5 class="alignment-name">Pants</h5>
        <pre class="alignment-seqs"><div class="query-seq"></div><div
                class="midline-seq"></div><div
                class="subject-seq"></div></pre>
    </div>

    <div class="modal fade" id="alignment-viewer" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <div class="modal-title">
                        <h5><strong>Subject:</strong> <span class="subject-title"></span></h5>
                        <h5><strong>Query:</strong> <span class="query-title"></span></h5>
                    </div>
                </div>
                <div class="modal-body alignments">
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default export-alignments" type="button">Export alignments</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

</div>


<div class="container-fluid" id="results-container">
    <div class="container">
        <div class="row" id="introduction">
            <div class="col-sm-8 col-sm-push-2">
                <h1>Visualize your BLAST results.</h1>
                <p>Kablammo helps you create interactive visualizations of BLAST
                    results from your web browser. Find your most interesting alignments, list
                    detailed parameters for each, and export a publication-ready vector
                    image, all without installing any software.</p>
                <div>
                    <img src="img/example_results.svg" alt="Example results" id="example-results">
                </div>
                <div>
                    <button type="button" class="start-tour btn btn-primary btn-lg btn-block">Show me how Kablammo works &raquo;</button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/ext/colpick.js"></script>
<script type="text/javascript" src="js/ext/bootstrap-tour.min.js"></script>

<script type="text/javascript" src="js/grapher.js"></script>
<script type="text/javascript" src="js/graph.js"></script>
<script type="text/javascript" src="js/blast_parser.js"></script>
<script type="text/javascript" src="js/blast_results_loader.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<script type="text/javascript" src="js/exporter.js"></script>
<script type="text/javascript" src="js/image_exporter.js"></script>
<script type="text/javascript" src="js/alignment_viewer.js"></script>
<script type="text/javascript" src="js/alignment_exporter.js"></script>
<script type="text/javascript" src="js/tour_guide.js"></script>
<script type="text/javascript" src="js/kablammo.js"></script>


<script>
    console.log(window.contextRef )
    console.log(window.contextRef._iface )

    window.contextRef._iface._fun_showXMLByName("enriched-rd-genes.uniprot_sprot.blast.xml", ()=> {

    })
</script>
</body>
</html>
